<template>
  <div>
    <!-- 经度输入 -->
    <div>
      <label for="longitude">经度:</label>
      <input
        id="longitude"
        v-model="longitudeInput"
        @input="handleInput('longitude')"
        placeholder="请输入经度（度分秒或小数点格式）"
      />
      <span v-if="longitudeDisplay">{{ longitudeDisplay }}</span>
    </div>
    <!-- 纬度输入 -->
    <div>
      <label for="latitude">纬度:</label>
      <input
        id="latitude"
        v-model="latitudeInput"
        @input="handleInput('latitude')"
        placeholder="请输入纬度（度分秒或小数点格式）"
      />
      <span v-if="latitudeDisplay">{{ latitudeDisplay }}</span>
    </div>
    <!-- 确认按钮 -->
    <el-button @click="confirmInput">确认</el-button>
    <el-button @click="cancelInput">取消</el-button>
  </div>
</template>

<script setup lang="ts" name="EditPosition">
import { ref, onMounted } from 'vue';
const props = defineProps({
  editPosition: {
    type: Array,
    default: () => []
  }
});
const emits = defineEmits(['save', 'cancel']);

const longitudeInput = ref('');
const latitudeInput = ref('');
const longitudeDisplay = ref('');
const latitudeDisplay = ref('');

// 判断是否为小数点格式
const isDecimalFormat = (value) => {
  return /^-?\d+(\.\d+)?$/.test(value);
};

// 判断是否为度分秒格式
const isDMSFormat = (value) => {
  return /^-?\d+°\d+'\d+(\.\d+)?''$/.test(value);
};

// 小数点格式转换为度分秒格式
const decimalToDMS = (decimal) => {
  const num = parseFloat(decimal);
  const degrees = Math.trunc(num);
  const minutesDecimal = Math.abs((num - degrees) * 60);
  const minutes = Math.trunc(minutesDecimal);
  const seconds = (minutesDecimal - minutes) * 60;
  return `${degrees}°${minutes}'${seconds.toFixed(2)}''`;
};

// 度分秒格式转换为小数点格式
const DMSToDecimal = (dms) => {
  const match = dms.match(/(-?\d+)°(\d+)'(\d+(\.\d+)?)''/);
  if (match) {
    const degrees = parseInt(match[1], 10);
    const minutes = parseInt(match[2], 10);
    const seconds = parseFloat(match[3]);
    return (degrees + (minutes / 60) + (seconds / 3600)).toFixed(6);
  }
  return null;
};

// 处理输入事件
const handleInput = (type) => {
  const inputValue = type === 'longitude' ? longitudeInput.value : latitudeInput.value;
  let result;
  if (isDecimalFormat(inputValue)) {
    result = decimalToDMS(inputValue);
  } else if (isDMSFormat(inputValue)) {
    result = DMSToDecimal(inputValue);
  } else {
    result = '输入格式不正确';
  }
  if (type === 'longitude') {
    longitudeDisplay.value = result;
  } else {
    latitudeDisplay.value = result;
  }
};

// 确认输入
const confirmInput = () => {
  let data = [
    parseFloat(isDecimalFormat(longitudeDisplay.value)? longitudeDisplay.value : longitudeInput.value),
    parseFloat(isDecimalFormat(latitudeDisplay.value)? latitudeDisplay.value : latitudeInput.value)
  ];
  emits('save', data);
};

// 取消输入
const cancelInput = () => {
  emits('cancel');
};

onMounted(() => {
  if (props.editPosition.length) {
    longitudeInput.value = props.editPosition[0];
    latitudeInput.value = props.editPosition[1];
  }
});
</script>

<style scoped>
div {
  margin-bottom: 10px;
}
label {
  display: inline-block;
  width: 80px;
}
input {
  width: 200px;
}
</style>    